<template>
      <!-- 接收从AdvSearch传来的参数 并利用该参数
             展示所有符合条件的文章块Article -->
    <div>
        <br>
<!-- 页头 -->

 <!-- 搜索结果 -->
 <el-row class="header">
            <span style="float:left; font-size: 22px; color: #A0A0A0">
            一共查询到
            <span style="color: #525455">&nbsp;1000+&nbsp;</span>
            条结果
            </span>
      </el-row>

      <!-- 对搜索结果进行进一步筛选 -->

      <el-row>
      <template class="filterblock">
      <!-- 筛选会议 -->
      <span>

        <el-dropdown >
        <span class="el-dropdown-link">
          会议<i class="el-icon-arrow-down el-icon--right"></i>

        </span>
        <el-dropdown-menu slot="dropdown" class="hiddenMenu">
          <el-checkbox-group v-for="(o,index) in aggregation.conference"
                                   :key="index"
                                   style="margin-bottom: 15px; text-align: left"
                                   v-model="checkConferenceList">
                  <el-checkbox :label=o.name>
                    <el-tooltip class="item" effect="dark" :content="o.name" placement="right">
                      <span>{{ o.name|ellipsis_25 }}&nbsp;</span>
                    </el-tooltip>
                  </el-checkbox>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
      </span>

      <!-- 筛选期刊 -->
      <span>
          <el-dropdown>
        <span class="el-dropdown-link">
          期刊<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="hiddenMenu">
          <el-checkbox-group v-for="(o,index) in aggregation.journal"
                                   :key="index"
                                   style="margin-bottom: 15px; text-align: left"
                                   v-model="checkJournalList">
                  <el-checkbox :label=o.name>
                    <el-tooltip class="item" effect="dark" :content="o.name" placement="right">
                      <span>{{ o.name|ellipsis_25 }}&nbsp;</span>
                    </el-tooltip>
                  </el-checkbox>
                </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
      </span>
      <!-- 筛选出版商 -->
        <span>

          <el-dropdown>
        <span class="el-dropdown-link">
          出版商<i class="el-icon-arrow-down el-icon--right"></i>
        </span>

        <el-dropdown-menu slot="dropdown" class="hiddenMenu">
          <el-checkbox-group v-for="(o,index) in publisher"
                                   :key="index"
                                   style="margin-bottom: 15px; text-align: left"
                                   v-model="checkPublisherList">
                  <div v-for="(val, key) in o" :key="key">
                    <el-checkbox :label=key>
                      <el-tooltip class="item" effect="dark" :content="key" placement="right">
                        <span>{{ key|ellipsis_25 }}&nbsp;</span>
                      </el-tooltip>
                    </el-checkbox>
                  </div>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
        </span>

        </template>
        <span>
          &nbsp;
          &nbsp;
          <el-button type="success" icon="el-icon-check" circle @click="commitFilter"></el-button>
          <el-button type="danger" icon="el-icon-close" circle @click="cancel"></el-button>
        </span>

      </el-row>






      <div>
              <el-row>
                <el-col :span="17">
                  <span style="display:flex; font-size:16px; margin-top:10px;color: #A0A0A0">论文 (1000+)</span>
                </el-col>
                <el-col :span="2">
                  <div style="margin-top:10px">
                    <span style="font-size:16px;color: #A0A0A0">排序</span>
                  </div>
                </el-col>
                <el-col :span="5">

                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in queue"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>

                    </el-select>




                </el-col>
              </el-row>
            </div>

<!-- List -->
            <br>
      <ArticleList :articles="articles">
    </ArticleList>
    <br>





<!-- 页尾 -->
      <el-col :span="16"><div class="grid-content bg-purple">


            <!-- <ArticleBlocks :articles="articles"
                           @changeCollect="changeCollect"
                           flag="searchRes"></ArticleBlocks> -->

            <div>
              <el-row>
                <!-- <el-col :span="5" style="text-align:right">
                  <div >
                    <span>每页</span>
                    <el-input-number style="width:100px; margin: 22px 15px 15px;" el-input-number v-model="size" controls-position="right" @change="handleSizeChange" :min="1" :max="20"></el-input-number>

                    <span>条</span>
                  </div>
                </el-col> -->
                <!-- <el-col :span="15">
                  <el-pagination layout="prev, pager, next, jumper"
                                 background
                                 :current-page="pageIdx"
                                 :page-size="size"
                                 :total="total_hits"
                                 @size-change="handleSizeChange"
                                 @current-change="handleCurrentChange"
                                 style="margin: 20px">
                  </el-pagination>
                </el-col> -->

                <!-- <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="itemsCount"
                    :page-size=3>

                </el-pagination> -->

                <div>
              <el-row>
                <el-col :span="8" style="text-align:right">
                  <div >
                    <span>每页</span>
                    <el-input-number style="width:100px; margin: 22px 15px 15px;" el-input-number v-model="size" controls-position="right" @change="handleSizeChange" :min="1" :max="10"></el-input-number>
                    <!-- height:34px; -->
                    <span>条</span>
                  </div>
                </el-col>
                <el-col :span="15">
                  <el-pagination layout="prev, pager, next, jumper"
                                 background
                                 :current-page="page"
                                 :page-size="size"
                                 :total="total_hits"
                                 @size-change="handleSizeChange"
                                 @current-change="handleCurrentChange"

                                 style="margin: 20px">

                  </el-pagination>
                </el-col>
              </el-row>
            </div>


              </el-row>
            </div>

          </div></el-col>




        <!-- <h1>搜索结果</h1>
        <h1>{{type}}</h1>
        <h1>{{name}}{{startDate}}{{endDate}}</h1> -->
    </div>
</template>

<script>
import ArticleList from './ArticleList.vue';
export default {
    props:["name","authorName","type","startDate","endDate","header_select", "input", "mode", "conditions", "min_date", "max_date",
      "total_hits", "total_hits_str","normalSearchOption"],
    components:{ArticleList},
    data() {
        return {
          publisher: [
          {
            "IEEE": 13
          },
          {
            "Apress, Berkeley, CA": 8
          },
          {
            "IOP Publishing": 7
          },
          {
            "ACM": 5
          },
          {
            "The Open Journal": 4
          },
          {
            "Elsevier BV": 3
          },
          {
            "Github": 3
          },
          {
            "Packt Publishing": 3
          },
          {
            "Apress": 2
          }
        ],
      itemsCount:1023,
      articles:[],
      aggregation:{},
      sortType:0,
      watchStates:true,
            //demo的数据
      index:'',
      page: 1,
      size: 10,
      searchBarFixed:false,
      select: '1',
      value: '',
      queue: [
        {
          value: 1,
          label: "按匹配程度递减",
        },
        {
          value: 2,
          label: "按被引用量递减",
        },
        {
          value: 3,
          label: "按发表时间递减",
        }
      ],
      sorter: 1,
      minYear: 1900,
      maxYear: 2021,
      year: [1900, 2021],

      checkDoctypeList: [],
      checkJournalList: [],
      checkConferenceList: [],
      checkPublisherList: [],


        }
    },
  methods: {
    getNormalSearchFirstFilter() {
      console.log("普通搜索 第一过滤器");
      if (this.normalSearchOption != "author")
        this.normalSearchOption="main";
      const formData={
              name:this.name,
              normalSearchOption:this.normalSearchOption,
              page:this.page,
              size:this.size
          }
          this.$axios({
            method:'post',
            url:'http://117.78.4.242/api/search/normalSearch/firstFilter/',
            data:JSON.stringify(formData)
          }).then(response=>{
            this.aggregation=response.data.aggregations;
            this.articles=response.data.articles;
            console.log(response.data)
            console.log("消息已收到")
            this.page=1
            this.size=10
          })
    },
      getFirstFilter(){
        const formData={
              name:this.name,
              authorName:this.authorName,
              type:this.type,
              // 时间对象 如果是空对象{}就不作为筛选条件 如果是Date对象就按照Date对象筛选
              startDate:JSON.stringify(this.startDate),
              endDate:JSON.stringify(this.endDate),
              page:this.page,
              size:this.size
          }

          this.$axios({
            method:'post',
            url:'http://117.78.4.242/api/search/firstFilter/',
            data:JSON.stringify(formData)

          }).then(response=>{
            this.aggregation=response.data.aggregations;
            this.articles=response.data.articles;

            console.log(response.data)
            console.log("消息已收到")
            this.page=1
            this.size=10
          })
      },
      // 不筛选aggregation点击分页
      defaultNextPage(){
        const formData={
              name:this.name,
              authorName:this.authorName,
              type:this.type,
              // 时间对象 如果是空对象{}就不作为筛选条件 如果是Date对象就按照Date对象筛选
              startDate:JSON.stringify(this.startDate),
              endDate:JSON.stringify(this.endDate),
              page:this.page,
              size:this.size
          }

          this.$axios({
            method:'post',
            url:'http://117.78.4.242/api/search/firstFilter/',
            data:JSON.stringify(formData)

          }).then(response=>{
            this.aggregation=response.data.aggregations;
            this.articles=response.data.articles;

            console.log(response.data)
            console.log("defaultNextPage")
          })
      },
      // 筛选aggregation点击分页
      selectNextPage()
      {
        const formData={
            name:this.name,
            authorName:this.authorName,
            // 以第二级filter的类型为准
            // type:this.type,
            
            startDate:this.startDate,
            endDate:this.endDate,
            checkPublisherList:this.checkPublisherList,
            checkJournalList:this.checkJournalList,
            checkConferenceList:this.checkConferenceList,
            page:this.page,
            size:this.size
          }
        this.$axios({
          method:'POST',
          url:'http://117.78.4.242/api/search/secondFilter/',
          data:JSON.stringify(formData)

        }).then(response=>{
          console.log(this.startDate)
          console.log(this.endDate)
          this.articles=response.data.articles;
          console.log(this.page)
          console.log(this.size)
          console.log(response)
          console.log("selectNextPage")
        })
      },
      // 点击排序后分页
      sortNextPage(){
        const formData={
            name:this.name,
            authorName:this.authorName,
            // 以第二级filter的类型为准
            // type:this.type,
            // 排序类型 1 2 3
            //依次为按照匹配程度递减 按照被引用量递减 按照发表时间从新到旧
            sortType:this.sortType,
            startDate:this.startDate,
            endDate:this.endDate,
            checkPublisherList:this.checkPublisherList,
            checkJournalList:this.checkJournalList,
            checkConferenceList:this.checkConferenceList,
            page:this.page,
            size:this.size
          }
      this.$axios({
          method:'POST',
          url:'http://117.78.4.242/api/search/getSortedResult/',
          data:JSON.stringify(formData)

        }).then(response=>{
          this.articles=response.data.articles;

          console.log(response)
          console.log("getSorted")
          console.log(this.page)
          console.log(this.size)
        })
      },

      handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = 2*(document.querySelector('#chooseBar').offsetTop)
      this.searchBarFixed = scrollTop > offsetTop;

      var offsetdown=document.querySelector('.content-select-result #sideBars').offsetTop+document.getElementById('sideBars').offsetHeight
      if(scrollTop>offsetdown) this.searchBarFixed=false
    },
        makeSure(){
            return
        },
        //size更新 立刻刷新页面
        handleSizeChange(val) {
            this.size = val;
            // console.log("size"+this.size)
            // if(this.checkPublisherList==[]&&this.checkConferenceList==[]&&this.checkJournalList==[])
            // this.defaultNextPage();
            // else
            // this.getSortedResult();
        },
        // page更新 也刷新页面
        handleCurrentChange(val) {
            this.page = val;
            // console.log("page"+this.page)
            // if(this.checkPublisherList==[]&&this.checkConferenceList==[]&&this.checkJournalList==[])
            // this.defaultNextPage();
            // else
            // this.getSortedResult();
        },

      // 取消筛选条件
      cancel(){
      this.checkDoctypeList = [];
      this.checkJournalList = [];
      this.checkConferenceList = [];
      this.checkPublisherList = [];
    },
    // 提交筛选条件
    commitFilter(){
      this.page=1
        const formData={
            name:this.name,
            authorName:this.authorName,
            // 以第二级filter的类型为准
            // type:this.type,
            
            startDate:this.startDate,
            endDate:this.endDate,
            checkPublisherList:this.checkPublisherList,
            checkJournalList:this.checkJournalList,
            checkConferenceList:this.checkConferenceList,
            page:this.page,
            size:this.size
          }
        this.$axios({
          method:'POST',
          url:'http://117.78.4.242/api/search/secondFilter/',
          data:JSON.stringify(formData)

        }).then(response=>{

          this.articles=response.data.articles;
          console.log(this.page)
          console.log(this.size)
          console.log(response)
          console.log("消息已收到")
        })
    },
    // 按照选择的类型排序
    getSortedResult(){

      const formData={
            name:this.name,
            authorName:this.authorName,
            // 以第二级filter的类型为准
            // type:this.type,
            // 排序类型 1 2 3
            //依次为按照匹配程度递减 按照被引用量递减 按照发表时间从新到旧
            sortType:this.sortType,
            startDate:this.startDate,
            endDate:this.endDate,
            checkPublisherList:this.checkPublisherList,
            checkJournalList:this.checkJournalList,
            checkConferenceList:this.checkConferenceList,
            page:this.page,
            size:this.size
          }
      this.$axios({
          method:'POST',
          url:'http://117.78.4.242/api/search/getSortedResult/',
          data:JSON.stringify(formData)

        }).then(response=>{
          this.articles=response.data.articles;

          console.log(response)
          console.log("消息已收到")
          console.log(this.page)
          console.log(this.size)
        })
    },
    testDataType(){
      console.log("type is")
      console.log(typeof this.startDate)
      console.log(this.startDate)

    }


    },
    computed:{

    },
    filters: {
    //超过20位显示 ...
    ellipsis: function(value) {
      if (!value) return "";
      if (value.length > 400) {
        return value.slice(0,400) + "...";
      }
      return value;
    },
    ellipsis_25: function(value) {
      if (!value) return "";
      if (value.length > 25) {
        return value.slice(0,25) + "...";
      }
      return value;
    }
  },
    mounted() {
      console.log(this.startDate)
      this.$bus.$on('getFirstFilter', this.getFirstFilter)
      this.$bus.$on('getNormalSearchFirstFilter', this.getNormalSearchFirstFilter)

    },
  watch:{
    page:{
      handler(n,o){
            console.log("page"+this.page)
            if(this.sortType!=0)
            {
              console.log("sortPage")
              this.sortNextPage()
              return
            }
            if(this.checkPublisherList.length==0&&this.checkConferenceList.length==0&&this.checkJournalList.length==0)
            {
              console.log(this.checkPublisherList)
              console.log(this.checkConferenceList)
              console.log(this.checkJournalList)
              console.log("dsizeget")
              this.defaultNextPage();
            }

            else
            { console.log(this.checkPublisherList)
              console.log(this.checkConferenceList)
              console.log(this.checkJournalList)
              console.log("ndsizeget")
              this.selectNextPage()
            }
      }
    },

    size:{
      handler(n,o){

            console.log("size"+this.size)
            if(this.sortType!=0)
            {
              this.sortNextPage()
              return
            }
            if(this.checkPublisherList===[]&&this.checkConferenceList===[]&&this.checkJournalList===[])
            {

              console.log("dsizeget")
              this.defaultNextPage();
            }

            else
            {
              console.log("ndsizeget")
              this.selectNextPage()
            }

      }
    },
    value:{
      deep:true,
      handler(newValue,oldValue){
        console.log(this.value)
        this.sortType=this.value
        this.page=1
        this.getSortedResult()
      }
    },
    articles:{
      deep:true,
      handler(newValue,oldValue){
      }
    },
    aggregation:{
      deep:true,
      handler(newValue,oldValue){
        console.log(this.aggregation)
      }
    }
  }

}
</script>

  <style scoped>
  .el-dropdown-link {
      font-family:fantasy;

      cursor: pointer;
      color:#409EFF;
      font-size: 30px;
      font-weight: 800;
    }
    .el-icon-arrow-down {
      font-size: 20px;
    }
  .el-dropdown-link:hover {
    color:gray
  }
  .filterblock{
    width: 240px;
    background-color:#409EFF ;

  }

 .hiddenMenu{
  padding-top: 30px;
  height: 450px;
  width: 300px;
  padding-left: 20px;

 }

</style>